<template>
    <div>
    <div id="daohang">
        <div id="caidan" >
            <el-divider></el-divider>
            <ul style="height: 60px">
                <li :ref=fuquanxuan.entity.name @click="changeWidth(fuquanxuan)" >
                    <div class="caidan_big" >
                        <div class="caidan_div">
                           <span >全部</span>
                        </div>
                    </div>
                </li>
                <li @click="changeWidth(item)" :ref="item.entity.name"    v-for="item in menuData"   class="caidan_li" :value="item.entity.value" >
                    <div class="caidan_big">
                        <div class="caidan_div">
                            <span > {{item.entity.name}}</span>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <el-divider></el-divider>
        <div id="zi" v-show="aaa">
            <ul style="height: 60px">
                <li :ref=ziquanxuan.entity.name  @click="changezi(ziquanxuan)">
                    <div class="caidan_big1">
                        <div class="caidan_div2">
                            <span >全部</span>
                        </div>
                    </div>
                </li>
                <li v-for="items in children" @click="changezi(items)" :ref="items.entity.name" :value="items.entity.value">
                    <div class="zi_div">
                        <div class="zi_div2" >
                            <span > {{items.entity.name}}</span>
                        </div>
                    </div>
                </li>
            </ul>
            <el-divider></el-divider>
        </div>
        <div id="san">
            <ul style="height: 60px">
                <li :ref=sanquanxuan.entity.name @click="changesan(sanquanxuan)" >
                    <div class="caidan_big1">
                        <div class="caidan_div2">
                            <span >全部</span>
                        </div>
                    </div>
                </li>
                <li  v-for="sanitems in fufei" @click="changesan(sanitems)" :ref=sanitems.entity.name      class="caidan_li" :value="sanitems.entity.value" >
                    <div class="caidan_big">
                        <div class="caidan_div">
                            <span>{{sanitems.entity.name}}</span>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    </div>
</template>

<script>
    export default {
        name: "kechengzhongxin",
        data(){
            return{
                activeIndex: ' ',

                imgs:[
                    "https://static-dev.roncoo.com/course/587ead2ffb694d1ca1d28e262b54accb.png",
                    "http://static.roncoos.com/os/12.jpg",
                    "http://static.roncoos.com/os/11.jpg"],

                kechengs:[
                    {name:"领课教育系统",img:"http://static.roncoos.com/os/logo.png",price:100000.00,},
                    {name:"领课教育系统",img:"http://static.roncoos.com/os/logo.png",price:100000.00},
                    {name:"领课教育系统",img:"http://static.roncoos.com/os/logo.png",price:100000.00},
                    {name:"领课教育系统",img:"http://static.roncoos.com/os/logo.png",price:100000.00},
                    {name:"领课教育系统",img:"http://static.roncoos.com/os/logo.png",price:100000.00},
                    {name:"领课教育系统",img:"http://static.roncoos.com/os/logo.png",price:100000.00},
                ],
                lgs:[
                    {name:"领课教育系统",img:"http://static.roncoos.com/os/logo.png",price:100000.00},
                    {name:"领课教育系统",img:"http://static.roncoos.com/os/logo.png",price:100000.00},
                    {name:"领课教育系统",img:"http://static.roncoos.com/os/logo.png",price:100000.00},
                    {name:"领课教育系统",img:"http://static.roncoos.com/os/logo.png",price:100000.00},
                    {name:"领课教育系统",img:"http://static.roncoos.com/os/logo.png",price:100000.00},
                    {name:"领课教育系统",img:"http://static.roncoos.com/os/logo.png",price:100000.00},
                ],
                menuData: [
                    {
                        //一级
                        entity: {
                            id: 1,
                            name: "龙果开源项目",
                            icon: "el-icon-message",
                            alias: "一级菜单"
                        },
                        //二级
                        childs: [
                            {
                                entity: {
                                    id: 3,
                                    name: "领课教育系统",
                                    icon: "el-icon-loading",
                                    alias: "权限管理",
                                    value: { path: "/hello" }
                                }
                            },
                            {
                                entity: {
                                    id: 4,
                                    name: "龙果支付系统",
                                    icon: "el-icon-bell",
                                    alias: "角色管理",
                                    value: "/system/role"
                                }
                            },
                            {
                                entity: {
                                    id: 2,
                                    name: "龙果充值系统",
                                    icon: "el-icon-edit",
                                    alias: "菜单管理",
                                    value: "/system/menu"
                                }
                            },
                            {
                                entity: {
                                    id: 5,
                                    name: "龙果运维系统",
                                    icon: "el-icon-mobile-phone\r\n",
                                    alias: "分组管理",
                                    value: "/system/group"
                                }
                            },
                            {
                                entity: {
                                    id: 9,
                                    name: "龙果管理系统",
                                    icon: "el-icon-mobile-phone\r\n",
                                    alias: "分组管理",
                                    value: "/system/group"
                                }
                            },
                            {
                                entity: {
                                    id: 6,
                                    name: "龙果集成项目",
                                    icon: "el-icon-mobile-phone\r\n",
                                    alias: "分组管理",
                                    value: "/system/group"
                                }
                            },
                            {
                                entity: {
                                    id: 7,
                                    name: "龙果教程项目",
                                    icon: "el-icon-mobile-phone\r\n",
                                    alias: "分组管理",
                                    value: "/system/group"
                                }
                            },
                            {
                                entity: {
                                    id: 8,
                                    name: "龙果代码生成",
                                    icon: "el-icon-mobile-phone\r\n",
                                    alias: "分组管理",
                                    value: "/system/group"
                                }
                            },
                        ]
                    },
                    {
                        //一级
                        entity: {
                            id: 6,
                            name: "一级分类1",
                            icon: "el-icon-news",
                            alias: "三级菜单"
                        },
                        //二级
                        childs: [
                            {
                                entity: {
                                    id: 7,
                                    name: "二级",
                                    icon: "el-icon-phone-outline\r\n",
                                    alias: "帐号管理",
                                    value: ""
                                },
                                //三级
                                childs: [
                                    {
                                        entity: {
                                            id: 14,
                                            name: "二级分类",
                                            icon: "el-icon-sold-out\r\n",
                                            alias: "邮箱管理",
                                            value: "/content/email"
                                        }
                                    },
                                    {
                                        entity: {
                                            id: 13,
                                            name: "二级分类1",
                                            icon: "el-icon-service\r\n",
                                            alias: "密码管理",
                                            value: "/content/pass"
                                        }
                                    }
                                ]
                            },
                            {
                                entity: {
                                    id: 8,
                                    name: "二级分类",
                                    icon: "el-icon-picture",
                                    alias: "积分管理",

                                    value: "/user/integral"
                                }
                            }
                        ]
                    },
                    {
                        //一级
                        entity: {
                            id: 40,

                            name: "一级分类2",
                            icon: "el-icon-rank",
                            alias: "四级菜单"
                        },
                        //er级
                        childs: [
                            {
                                entity: {
                                    id: 41,
                                    name: "二级分类1",
                                    icon: "el-icon-printer",
                                    alias: "分类管理"
                                },

                                //三级
                                // childs: [
                                //     {
                                //         entity: {
                                //             id: 42,
                                //             name: "classifyManage3",
                                //             icon: "el-icon-printer",
                                //             alias: "分类管理"
                                //         },
                                //     }
                                // ]
                            },
                            {
                                entity: {
                                    id: 41,
                                    name: "二级分类2",
                                    icon: "el-icon-printer",
                                    alias: "分类管理"
                                },
                            },
                            {
                                entity: {
                                    id: 41,
                                    name: "二级分类3",
                                    icon: "el-icon-printer",
                                    alias: "分类管理"
                                },
                            }
                        ]
                    }
                ],
                children:[],
                childrens:[],
                fuquanxuan:{entity:{name:"fuquanxuan"}},
                ziquanxuan:{entity:{name:"zi"}},
                sanquanxuan:{entity:{name:"san"}},
                fufei:[{entity:{name:"付费"} } ,{entity:{name:"免费"}}],
                aaa:false,
                beijing:"",
                zibeijing:"",
                sanbeijing:"",
            }
        },
        methods: {
            changeWidth(item) {
                if(item.entity.name==this.beijing){

                }else {
                this.aaa = 'childs' in item //判断 item对象中是否有“childs”这个属性
                if(this.aaa){
                    this.children = item.childs
                }
                var abc = item.entity.name
                if (abc == "fuquanxuan") {
                    var ssw = this.$refs[abc].children[0].children[0].children[0].style;
                    // console.log(this.$refs[abc].children[0].children[0].children[0])
                    // console.log(this.$refs[abc])
                } else {
                    var ssw = this.$refs[abc][0].children[0].children[0].children[0].style;
                    // console.log(this.$refs[abc][0].children[0].children[0].children[0])
                    // console.log(this.$refs[abc])
                }
                // console.log(this.$refs[abc][0])
                ssw.background = "black";
                ssw.color = "#F5F5F5"
                ssw.border = "black 5px  solid"
                ssw.radius == "15px"


                if (this.beijing == 'fuquanxuan') {
                    var bbb = this.$refs[this.beijing].children[0].children[0].children[0].style;
                } else {
                    var bbb = this.$refs[this.beijing][0].children[0].children[0].children[0].style;
                }

                bbb.background = "white";
                bbb.color = "black"
                bbb.border = "0px"
                this.beijing = abc;
                console.log(this.aaa)
                if(this.aaa){
                    this.erji()
                }
                }
            },


            changezi(items) {
                if(items.entity.name==this.zibeijing){

                }else {
                    var abc1 = items.entity.name;

                    if (abc1 == "zi") {
                        var ssw1 = this.$refs[abc1].children[0].children[0].children[0].style;

                        // console.log(this.$refs[abc].children[0].children[0].children[0])
                        // console.log(this.$refs[abc])
                    } else {
                        var ssw1 = this.$refs[abc1][0].children[0].children[0].children[0].style;
                        // console.log(this.$refs[abc][0].children[0].children[0].children[0])
                        // console.log(this.$refs[abc])
                    }
                    // console.log(this.$refs[abc][0])
                    ssw1.background = "black";
                    ssw1.color = "#F5F5F5"
                    ssw1.border = "black 5px  solid"
                    ssw1.radius == "15px"


                    if (this.zibeijing == 'zi') {
                        var bbb1 = this.$refs[this.zibeijing].children[0].children[0].children[0].style;

                    } else {
                        var bbb1 = this.$refs[this.zibeijing][0].children[0].children[0].children[0].style;

                    }
                    bbb1.background = "white";
                    bbb1.color = "black"
                    bbb1.border = "0px"

                    this.zibeijing = abc1;
                }
            },


            changesan(sanitems) {
                if(sanitems.entity.name==this.sanbeijing){

                }else {
                    var abc2 = sanitems.entity.name;
                    if (abc2 == "san") {
                        // console.log(this.$refs[abc2])
                        var ssw2 = this.$refs[abc2].children[0].children[0].children[0].style;
                    }else {
                        var ssw2 = this.$refs[abc2][0].children[0].children[0].children[0].style;
                    }
                    ssw2.background = "black";
                    ssw2.color = "#F5F5F5"
                    ssw2.border = "black 5px  solid"
                    ssw2.radius == "15px"
                    if (this.sanbeijing == 'san') {
                        console.log()
                        var bbb2 = this.$refs[this.sanbeijing].children[0].children[0].children[0].style;
                    }else {
                        var bbb2 = this.$refs[this.sanbeijing][0].children[0].children[0].children[0].style;
                    }
                    bbb2.background = "white";
                    bbb2.color = "black"
                    bbb2.border = "0px"

                    this.sanbeijing = abc2;
                }
            },




            yiji() {
                var abc = this.fuquanxuan.entity.name;
                var ssw = this.$refs[abc].children[0].children[0].children[0].style;
                ssw.background = "black";
                ssw.color = "#F5F5F5"
                ssw.border = "black 5px  solid"
                this.beijing = abc;

            },
            erji() {
                var abc1 = this.ziquanxuan.entity.name;
                var ssw1 = this.$refs[abc1].children[0].children[0].children[0].style;
                ssw1.background = "black";
                ssw1.color = "#F5F5F5"
                ssw1.border = "black 5px  solid"
                this.zibeijing = abc1;
            },

            sanji() {
                var abc2 = this.sanquanxuan.entity.name;
                console.log()
                var ssw2 = this.$refs[abc2].children[0].children[0].children[0].style;
                ssw2.background = "black";
                ssw2.color = "#F5F5F5"
                ssw2.border = "black 5px  solid"
                this.sanbeijing = abc2;
            },

        },
        mounted() {
           this.yiji();
           this.sanji();
        },


    }
</script>

<style scoped>
    #caidan > ul > li{
        float: left;
        width: 100px;
        padding: 30px;
    }
    .caidan_div{

        text-align: center;
    }
    ul{
        list-style: none;
    }
    #zi > ul > li{
        float: left;
        padding: 30px;
    }
    #san > ul > li{
        float: left;
        width: 100px;
        padding: 30px;
    }
    span{
        border-radius: 7px;
    }
    #zi > ul > li{
        float: left;
        width: 100px;
    }
    #san > ul > li{
        float: left;
        width: 90px;

    }
    #san{
        position: absolute;

    }
    #caidan > ul{
        padding-left: 45px;
    }
    .el-divider--horizontal{
        margin: 0;
    }
    .el-divider--horizontal{
        width: 75%;
        margin-left: 80px;
    }
    #zi > ul {
        margin-left:5px ;
    }
    #san > ul{
        margin-left:10px;
    }
</style>